<script setup lang="ts">
import { reactive } from 'vue';
import AppRegionListSelector from './components/app-region-list-selector.vue';
interface Props {
  modelValue: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

interface Emits {
  (e: 'update:modelValue'): void;
  (e: 'onSelected', areaId: string): void;
}

const emits = defineEmits<Emits>();

const state = reactive<{
  /**
   * 选择的区域
   */
  areaId: string;
}>({
  areaId: '',
});

function selectArea(areaId: string) {
  state.areaId = areaId;
}
</script>
<template>
  <nut-popup
    round
    position="bottom"
    :style="{ height: '40vh' }"
    :visible="props.modelValue"
    @click-overlay="emits('update:modelValue')"
  >
    <view class="app-region-list-selector-popup">
      <view class="app-region-list-selector-popup__header">
        <text
          class="app-region-list-selector-popup__header--left"
          @click="emits('update:modelValue')"
          >取消</text
        >
        <nut-button
          type="info"
          size="small"
          class="app-region-list-selector-popup__header--right"
          :disabled="state.areaId === ''"
          @click="
            () => {
              emits('onSelected', state.areaId!);
              emits('update:modelValue');
            }
          "
          >确定</nut-button
        >
      </view>
      <app-region-list-selector @on-selected="selectArea" />
    </view>
  </nut-popup>
</template>
<style lang="scss">
@import './index.scss';
</style>
